<template>
  <div>
    <h3>MyHome 组件 --- {{ count }}</h3>
    <hr />

    <input type="text" v-focus v-color="'red'" >
    <!-- 点击按钮+1,文本框失去了焦点.如果我们希望,数值更新的时候,文本框继续获得焦点就要用到updated函数 -->
    <button type="button" class="btn btn-primary" @click="count+=1" v-color="color"  >+1</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      count:0,
      color:'#f00'
    }
  },
  // 私有自定义指令
  directives:{
    // focus:{
          // mounted:只在元素第一次插入DOM时被调用
    //    mounted(el){
    //       console.log('mounted')
           //el:是指令绑定的DOM元素
           //console.log(el)
    //       el.focus()
    //    },
          //  updated:会在每次DOM更新完成后被调用
    //    updated(el){
    //       console.log('updated')
    //       el.focus()
    //    }
          // 注意: 在 vue2 的项目中使用自定义指令时,【 mounted -> bind 】【 updated -> update 】
    // }

    

  }
}
</script>
